<template>
  <div style="width: 100%; padding: 0 20px">
    <div class="title" style="margin-bottom: 10px">
      <p>基本信息</p>
    </div>
    <zh-form
      :span="6"
      ref="devPlanManagerForm1"
      :labelCol="labelCol"
      :wrapperCol="wrapperCol"
      :model="formData1"
    >
      <zh-row>
        <zh-input
          prop="orgId"
          type="select"
          :options="orgList"
          :defaultFields="{ label: 'dictValue', value: 'dictKey' }"
          label="区划"
          v-model="formData1.orgId"
        ></zh-input>
        <zh-input
          prop="b0102"
          type="select"
          :showSearch="true"
          @search="onSearch"
          @change="onSelectChange"
          label="点位名称"
          :options="options"
          v-model="formData1.b0101"
          :defaultFields="{ label: 'b0102', value: 'b0101' }"
        ></zh-input>
        <zh-input
          prop="k0202"
          type="text"
          label="责任单位"
          v-model="formData1.k0202"
        ></zh-input>
        <zh-input
          prop="b0106"
          type="select"
          :options="dictData.b0106"
          :defaultFields="{ label: 'dictValue', value: 'dictKey' }"
          label="年代"
          v-model="formData1.b0106"
        ></zh-input>
        <zh-input
            prop="k0215"
            type="text"
            label="项目地址"
            v-model="formData1.k0215"
        ></zh-input>
        <zh-input
            prop="k0216"
            type="text"
            label="占地面积"
            v-model="formData1.k0216"
        ></zh-input>
        <zh-input
            prop="k0217"
            type="text"
            label="建筑面积"
            v-model="formData1.k0217"
        ></zh-input>
        <zh-input
            prop="k0218"
            type="text"
            label="负责人"
            v-model="formData1.k0218"
        ></zh-input>
<!--        <zh-input-->
<!--            prop="k0219"-->
<!--            type="text"-->
<!--            label="责任人"-->
<!--            v-model="formData1.k0219"-->
<!--        ></zh-input>-->
        <zh-input
            prop="k0220"
            type="textarea"
            label="简介"
            :span="13"
            :auto-size="{ minRows: 3, maxRows: 6 }"
            :labelCol="{span:3}" :wrapperCol="{span:21}"
            v-model="formData1.k0220"
        ></zh-input>
      </zh-row>
    </zh-form>
    <div class="title">
      <p>开发潜力排行和评价</p>
      <span>说明：评分制，满分10分</span>
    </div>
    <div class="operate">
      <div class="block">
        <div class="titleBlock">
          <p class="text">开发潜力综合指数</p>
          <span class="tips"
            >(综合指数=各项(权重*数值) 的综合)</span
          >
        </div>
        <div>
          <a-input
            placeholder="请输入"
            v-model="formData2.k0204"
            style="width: 30%; height: 50px; font-size: 25px"
            disabled
          />
        </div>
      </div>
      <div class="block">
        <div class="titleBlock">
          <p class="text">稀缺性</p>
          <a-input
            placeholder="请输入"
            v-model="formData2.k0205"
            @change="change('k0205', $event)"
          />
        </div>
        <div>
          <a-textarea
            placeholder="请输入说明文字"
            :auto-size="{ minRows: 3, maxRows: 6 }"
            v-model="formData2.k0206"
          />
        </div>
      </div>
    </div>
    <div class="operate">
      <div class="block">
        <div class="titleBlock">
          <p class="text">历史性</p>
          <a-input
            placeholder="请输入"
            v-model="formData2.k0207"
            @change="change('k0207', $event)"
          />
        </div>
        <div>
          <a-textarea
            placeholder="请输入说明文字"
            :auto-size="{ minRows: 3, maxRows: 6 }"
            v-model="formData2.k0208"
          />
        </div>
      </div>
      <div class="block">
        <div class="titleBlock">
          <p class="text">文化性</p>
          <a-input
            placeholder="请输入"
            v-model="formData2.k0209"
            @change="change('k0209', $event)"
          />
        </div>
        <div>
          <a-textarea
            placeholder="请输入说明文字"
            :auto-size="{ minRows: 3, maxRows: 6 }"
            v-model="formData2.k0210"
          />
        </div>
      </div>
    </div>
    <div class="operate">
      <div class="block">
        <div class="titleBlock">
          <p class="text">完整性</p>
          <a-input
            placeholder="请输入"
            v-model="formData2.k0211"
            @change="change('k0211', $event)"
          />
        </div>
        <div>
          <a-textarea
            placeholder="请输入说明文字"
            :auto-size="{ minRows: 3, maxRows: 6 }"
            v-model="formData2.k0212"
          />
        </div>
      </div>
      <div class="block">
        <div class="titleBlock">
          <p class="text">地理环境</p>
          <a-input
            placeholder="请输入"
            v-model="formData2.k0213"
            @change="change('k0213', $event)"
          />
        </div>
        <div>
          <a-textarea
            placeholder="请输入说明文字"
            :auto-size="{ minRows: 3, maxRows: 6 }"
            v-model="formData2.k0214"
          />
        </div>
      </div>
    </div>
    <div class="title" style="margin-bottom: 10px">
      <p>多媒体</p>
    </div>
    <div style="width: 100%;display: block">
      <div style="text-align: right;width: 100%">
        <ep-button
            icon="add.svg"
            size="small"
            type="primary"
            @click="addMediaInfo"
            :disabled="disabled"
        >添加
        </ep-button>
      </div>
      <div>
        <ul class="media-wrap">
          <li v-for="(item, index) in k03VOList" :key="index">
            <div class="item special">
              <div class="desc">序号</div>
              <p>{{ item.b0207 }}</p>
            </div>
            <div class="item">
              <div class="desc">名称</div>
              <p>{{ item.b0203 }}</p>
            </div>
            <div class="item">
              <div class="desc">媒体类型</div>
              <p>{{ item.b0202Name }}</p>
            </div>
            <div class="item">
              <div class="desc">缩略图</div>
              <template v-if="item.b0202Name === '图片'">
                <img
                    v-if="item.b0205"
                    :src="fileShowUrl + item.b0205"
                    @click="checkImg(item.b0205)"
                    alt=""
                />
              </template>
              <template v-else>
                <img
                    v-if="item.b0206"
                    :src="fileShowUrl + item.b0206"
                    @click="checkImg(item.b0206)"
                    alt=""
                />
              </template>
            </div>

            <div class="item">
              <div class="desc"></div>
              <div class="btn-wrap">
                <ep-button
                    size="small"
                    icon="edit.svg"
                    @click="editMediaInfo(item, index)"
                    :disabled="disabled"
                >编辑
                </ep-button>
                <ep-button
                    size="small"
                    type="danger"
                    icon="del.svg"
                    @click="deleteMediaInfo(index)"
                    :disabled="disabled"
                >删除
                </ep-button>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <a-modal
        :title="modalTitle"
        centered
        style="top: 20px"
        width="50%"
        destroyOnClose
        v-model="visible"
        cancelText="关闭"
        okText="保存"
        @ok="handleForm"
    >
      <mediaInfoItem ref="mediaInfoItem"/>
    </a-modal>
  </div>
</template>

<script>
import { fileShowUrl, getBatchDict } from "@/services/system/api";
import {
  getOrgList,
  getDevPotForK01,
  getDevPotDetail,
  getB01ListByB0102,
} from "@/services/system/whdngxlApi";
import modal from "ant-design-vue/lib/modal";
import mediaInfoItem from "@/pages/system/form/mediaInfoItem";
export default {
  name: "devPotentialEvaluateForm",
  components: {mediaInfoItem},
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      formData1: {
        k0201: "",
        orgId: "",
        b0102: "",
        k0202: "",
        b0106: "",
        k0215: "",
        k0216: "",
        k0217: "",
        k0218: "",
        k0219: "",
        k0220: "",
      },
      formData2: {
        k0204: 0,
        k0205: "",
        k0206: "",
        k0207: "",
        k0208: "",
        k0209: "",
        k0210: "",
        k0211: "",
        k0212: "",
        k0213: "",
        k0214: "",
      },
      orgId: "",
      orgList: [],
      modalTitle: "",
      visible: false,
      dictData: {},
      k01GuardVO: {},
      options: [],
      k03VOList: [],
      fileShowUrl,
      mediaFieldRuleTo: {
        k0201: 'k0201',
        b0201: 'k0301',
        b0203: 'k0302',
        b0202: 'k0303',
        b0206: 'k0304',
        b0205: 'k0305',
        b0207: 'k0306',
        flag: 'flag'
      },
      mediaFieldRuleFrom: {
        k0301: 'b0201',
        k0201: 'k0201',
        k0302: 'b0203',
        k0303: 'b0202',
        k0304: 'b0206',
        k0305: 'b0205',
        k0306: 'b0207'
      },
      k03VOListForEdit: [],
      k03VOListForDel: [],
      disabled: false
    };
  },
  created() {
    this.$http.post(getOrgList, {}).then((res) => {
      this.orgList = res.result;
    });
    const params2 = {};
    params2.dictFields = "b0106";
    this.$http.post(getBatchDict, params2).then((res) => {
      this.dictData = res.result;
    });
    this.$http.post(getDevPotForK01, {}).then((res) => {
      this.k01GuardVO = res.result;
    });
  },
  methods: {
    init(k0201) {
      this.$http.post(getDevPotDetail, { k0201: k0201 }).then((res) => {
        const data = res.result;
        this.formData1.k0201 = data.k0201;
        this.formData1.orgId = data.orgId;
        this.formData1.b0101 = data.b0101;
        this.$nextTick(() => {
          this.options = [{ b0101: data.b0101, b0102: data.b0102 }];
        });
        this.formData1.b0102 = data.b0102;
        this.formData1.k0202 = data.k0202;
        this.formData1.b0106 = data.b0106;
        this.formData1.k0215 = data.k0215;
        this.formData1.k0216 = data.k0216;
        this.formData1.k0217 = data.k0217;
        this.formData1.k0218 = data.k0218;
        this.formData1.k0219 = data.k0219;
        this.formData1.k0220 = data.k0220;

        this.formData2.k0204 = data.k0204;
        this.formData2.k0205 = data.k0205;
        this.formData2.k0206 = data.k0206;
        this.formData2.k0207 = data.k0207;
        this.formData2.k0208 = data.k0208;
        this.formData2.k0209 = data.k0209;
        this.formData2.k0210 = data.k0210;
        this.formData2.k0211 = data.k0211;
        this.formData2.k0212 = data.k0212;
        this.formData2.k0213 = data.k0213;
        this.formData2.k0214 = data.k0214;


        const k03VOList = res.result.k03VOList
        for (const item of k03VOList) {
          const mediaInfo = {}
          for (const itemKey in item) {
            if (itemKey === 'k0303') {
              if (item[itemKey] === '1') {
                mediaInfo.b0202Name = '图片'
              }
            }
            if (this.mediaFieldRuleFrom[itemKey]) {
              mediaInfo[this.mediaFieldRuleFrom[itemKey]] = item[itemKey]
            }
          }
          this.k03VOList.push(mediaInfo)
        }
      });
    },
    change(field, e) {
      // console.log(e.target._value)
      // console.log(e.target.value)
      if (e.target.value === "") {
        const v1 = ["k0205", "k0207", "k0209", "k0211", "k0213"];
        const v2 = ["k0102", "k0103", "k0104", "k0105", "k0106"];
        let sum = 0;
        for (let i = 0; i < v1.length; i++) {
          if (v1[i] === field) {
            continue;
          }
          sum += Number(this.formData2[v1[i]]) * this.k01GuardVO[v2[i]];
        }
        this.formData2.k0204 = sum;
      } else {
        var reg = /^([0-9]|10)(\.|\.\d)?$/;
        if (!reg.test(e.target.value)) {
          this.formData2[field] = e.target._value;
        }
        this.formData2.k0204 =
          Number(this.formData2.k0205) * this.k01GuardVO.k0102 +
          Number(this.formData2.k0207) * this.k01GuardVO.k0103 +
          Number(this.formData2.k0209) * this.k01GuardVO.k0104 +
          Number(this.formData2.k0211) * this.k01GuardVO.k0105 +
          Number(this.formData2.k0213) * this.k01GuardVO.k0106;
      }
    },
    getData() {
      const params = {};
      Object.assign(params, this.formData1, this.formData2);

      if (this.k03VOList.length > 0) {
        const k03VOList = []
        for (let e of this.k03VOList) {
          if(!e.b0201){
            const k03VO = {}
            for (const itemKey in e) {
              if (this.mediaFieldRuleTo[itemKey]) {
                k03VO[this.mediaFieldRuleTo[itemKey]] = e[itemKey]
              }
            }
            k03VOList.push(k03VO)
          }
        }
        params.k03VOList = k03VOList
      }
      if (this.k03VOListForEdit.length > 0) {
        const k03VOListForEdit = []
        for (let e of this.k03VOListForEdit) {
          const k03VO = {}
          for (const itemKey in e) {
            if (this.mediaFieldRuleTo[itemKey]) {
              k03VO[this.mediaFieldRuleTo[itemKey]] = e[itemKey]
            }
          }
          k03VOListForEdit.push(k03VO)
        }
        params.k03VOListForEdit = k03VOListForEdit
      }
      if (this.k03VOListForDel.length > 0) {
        const k03VOListForDel = []
        for (let e of this.k03VOListForDel) {
          const k03VO = {}
          for (const itemKey in e) {
            if (this.mediaFieldRuleTo[itemKey]) {
              k03VO[this.mediaFieldRuleTo[itemKey]] = e[itemKey]
            }
          }
          k03VOListForDel.push(k03VO)
        }
        params.k03VOListForDel = k03VOListForDel
      }
      return params;
    },
    onSearch(value) {
      if (value) {
        this.$http.post(getB01ListByB0102, { b0102: value }).then((res) => {
          this.options = res.result;
        });
      }
    },
    onSelectChange(value, options) {
      this.formData1.b0102 = options.filter(
        (item) => item.b0101 === value
      )[0].b0102;
    },
    //新增
    addMediaInfo() {
      this.modalTitle = "新增";
      this.visible = true;
      this.$nextTick(() => {
        this.$refs.mediaInfoItem.editFlag = false
        this.getListSize(this.k03VOList);
        this.$refs.mediaInfoItem.b0207Num = this.b0207Num;
        this.$refs.mediaInfoItem.init(null);
      });
    },
    //编辑
    editMediaInfo(row, index) {
      this.modalTitle = "编辑";
      this.editIndex = index;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs.mediaInfoItem.editFlag = false
        if (row.b0201) {
          row.flag = "edit";
        }
        this.$refs.mediaInfoItem.init(row);
      });
    },
    deleteMediaInfo(index) {
      modal.confirm({
        title: "确认删除吗？",
        onOk: () => {
          if (this.k03VOList[index].b0201) {
            const item = JSON.parse(JSON.stringify(this.k03VOList[index]));
            item.flag = "delete";
            this.k03VOListForDel.push(item);
          }
          this.k03VOList.splice(index, 1);
        },
        onCancel: () => {
        },
      });
    },
    //确定
    handleForm() {
      var mediaInfoItem = this.$refs.mediaInfoItem.mediaInfoItem;
      if (this.modalTitle === "新增") {
        mediaInfoItem.flag = "save";
        this.k03VOList.push(mediaInfoItem);
      } else {
        if(mediaInfoItem.flag === 'edit'){
          this.k03VOListForEdit.push(mediaInfoItem)
        }
        this.k03VOList.splice(this.editIndex, 1, mediaInfoItem);
      }
      this.$nextTick(() => {
        this.visible = false;
      });
    },
    getListSize(list) {
      this.b0207Num = 0;
      list.forEach((item) => {
        if (item.b0207 > this.b0207Num) {
          this.b0207Num = item.b0207;
        }
      });
      if (this.b0207Num < list.length) {
        this.b0207Num = list.length;
      }
      this.b0207Num++;
    },
    checkImg(showId) {
      let url = this.fileShowUrl + showId;
      window.open(url, "_blank");
    },
  },
};
</script>

<style lang="less" scoped>
.title {
  display: flex;
  line-height: 32px;
  padding: 5px 0px;

  p {
    flex: 0 0 auto;
    color: #2466d0;
    font-weight: bold;
    font-size: 20px;
  }
  span {
    flex: 0 0 auto;
    margin-left: 8px;
    color: red;
  }
}
.operate {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 10px;

  > div {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    &.block {
      flex-direction: column;
      align-items: flex-start;
      width: 48%;
      > div {
        width: 100%;
      }
      .titleBlock {
        display: flex;
        align-items: center;
        line-height: 32px;
        padding: 5px 0 10px;
        .text {
          flex: 0 0 auto;
          min-width: 80px;
          color: #2466d0;
          font-size: 16px;
        }
        .tips {
          flex: 0 0 auto;
          margin-left: 8px;
          color: red;
        }
        > input {
          width: 120px;
        }
      }
    }
  }
}
.media-wrap {
  margin-top: 15px;

  li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 15px;

    .item {
      flex: 0 0 auto;
      width: 18%;

      .desc {
        width: 100%;
        height: 21px;
        line-height: 21px;
        font-weight: bold;
        margin-bottom: 10px;
      }

      p {
        width: 100%;
        height: 32px;
        line-height: 30px;
        padding: 0 10px;
        border: 1px solid #3e9fc8;
        border-radius: 4px;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .btn-wrap {
        text-align: center;
      }

      img {
        width: auto;
        height: 90px;
        max-width: 98%;
        vertical-align: middle;
        cursor: pointer;
      }

      &.special {
        width: 5%;
      }
    }
  }
}
</style>